import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import { useStore } from '@/hooks';
import DataForm from './DataForm';
import Logs from './Logs';

const BaseDrawer = ({ modal, onCancel, onSubmit, ...formProps }) => {
  const { integralStore: store } = useStore();

  useEffect(() => {
    return () => {
      store._tabStatus = '1';
    };
  }, [modal]);

  const _TAB_TYPE_TRANSACTION = [
    { name: t`成员资料`, key: '1', component: <DataForm modal={modal} id={modal.record?.id} onCancel={onCancel} onSubmit={onSubmit} {...formProps} /> },
    { name: t`日志流水`, key: '2', component: <Logs modal={modal} id={modal.record?.id} onCancel={onCancel} onSubmit={onSubmit} {...formProps} /> },
  ];

  // 添加时去除日志流水
  if (modal?.show === 'add') {
    _TAB_TYPE_TRANSACTION.splice(1, 1);
  }

  return (
    <>
      <Tab
        activeKey={store.tab_Status}
        onChange={(v) => { store.tab_Status = v; }}
      >
        {_TAB_TYPE_TRANSACTION.map((p) => (
          <Tab.Item title={p.name} key={p.key}>
            {p.component}
          </Tab.Item>))}
      </Tab>
    </>
  );
};

export default observer(BaseDrawer);
